<template>
  <div id="loadImage">
    <img :src="low" v-if="!this.loadFinshed">
    <img :src="high" 
         @load="handleChange"
         :style="{opacity:imageLoad,transition:`${this.durantion}ms`}"
         >
  </div>
</template>

<script>
export default {
  props:{
    low:{
      type:String,
      require:true
    },
    high:{
      type:String,
      require:true
    },
    durantion:{
      type:Number,
      default:2000
    }
  },
  data(){
    return{
      loadFinshed:false,
      imgLoad:false
    }
  },
  computed:{
    imageLoad(){
      return this.imgLoad?1:0
    }
  },
  methods:{
    handleChange(){
        this.imgLoad = true
      setTimeout(()=>{
        this.loadFinshed =true
        this.$emit("load")
      },this.durantion)
    },
  },
  
}
</script>

<style scoped>
#loadImage{
  position: relative;
  margin: 0 auto;
  width: 700px;
  height: 700px;
}
#loadImage img{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>